import React from 'react';
import {toJS} from 'mobx';
import * as ReactDOM from 'react-dom';
import { inject, observer } from 'mobx-react';
import { Flex, DateSwitch, Avatar, Rate, Tools, Icon, ActivityIndicator,Result } from 'weaver-mobile';
import { renderNoData,renderIcon} from '../public/BlogUtils';

const getLabel = Tools.getLabel;

/* 微博报表页面 */
@inject('blogReportStore')
@observer
export default class ConcernReport extends React.Component {
  static defaultProps = {
    prefixCls: 'blog-report-concern',
    mobilesrc: Tools.mobileDetect(),
  }

  componentDidMount() {
    if(this.props.mobilesrc.is("iPhone") && window.iNoBounce && window.iNoBounce.isEnabled()) {
      window.iNoBounce.disable(); // 解决ios滑动问题
    }
  }

  componentWillUnmount() {
    if(this.props.mobilesrc.is("iPhone") && window.iNoBounce && !window.iNoBounce.isEnabled()) {
      window.iNoBounce.enable(); // 组件卸载后，还原解决ios滑动问题时的设置
    }
  }

  detailInfo = (val,detailClass) => {
    return (
      <span className={`${detailClass}-tip`}>
        <Icon type={renderIcon[val].icon} color={renderIcon[val].color} size='xxs'/><span>{renderIcon[val].text}</span>
      </span>
    )
  }

  // 关注报表日期更新
  concernDateChange = (date) => {
    const { blogReportStore : { getAttentionReport } } = this.props;
    let str = date.split('-');
    getAttentionReport({ recordType:'blog', year:str[0], month:str[1] });
  }

  // 统计视图
  getTotal = (totalClass) => {
    const attentionReport = toJS(this.props.blogReportStore.attentionReport);
    return (
        <div className={totalClass}>
          <div className={`${totalClass}-head`}>
            <div className={`${totalClass}-head-nbsp`}>&nbsp;</div>
            <div className={`${totalClass}-head-text`}>{getLabel(352,'统计')}</div>
          </div>
          <div className={`${totalClass}-content`}>
            {
              attentionReport.map((tr,i) => {
                  let { cellType,oId} = tr[0];
                if(cellType=='header'){
                    return <div key={i} className={`${totalClass}-content-col`} onClick={() => {
                    window.location.href="/spa/blog/static4mobile/index.html#/userCenter/blogAttention/attention/hisBlog/"+oId;
                    }
                    }>
                        { tr.map((td,j) => this.attentionCell(td,j,`${totalClass}-content-col`)) }
                    </div>
                }else {
                    return <div key={i} className={`${totalClass}-content-col`}>
                        { tr.map((td,j) => this.attentionCell(td,j,`${totalClass}-content-col`)) }
                    </div>
                }

              })
            }
          </div>
        </div>
    );
  }

  // 关注报表统计视图信息处理
  attentionCell = (td,j,cellClass) => {
    let { cellType, oLeftNum, oRightNum, oName, oImageUrl, oIndexValue } = td;

    switch(cellType) {
      case 'header' : {
        return (
          <div key={j} className={`${cellClass}-name`}>
            <Avatar userId={td.oId} style={{ width:30, height:30 }}/>
            <span className={`${cellClass}-name-user`}>{oName}</span>
          </div>
        )
      }
      case 'total' : {
        return (
          <div key={j} className={`${cellClass}-num`}>
            <span style={{ color:'red' }}>{oLeftNum}</span>
            /
            <span>{oRightNum}</span>
          </div>
        )
      }
      case 'index' : {
        return (
          <div key={j} className={`${cellClass}-index`}>
            <Rate value={Number(oIndexValue)} size="xxs" />
            <span>{oIndexValue}</span>
          </div>
        )
      }
      case 'report' :
      case 'normal' : return;
      default: return;
    }
  }
  
  // 关注报表--明细视图报表信息处理
  attentionDetailCell = (td,j,tdClass) => {
    let { cellValue } = td;
    if(cellValue !== '') {
      return (
        <div className={tdClass} key={j}>
          <span><Icon type={renderIcon[cellValue].icon} color={renderIcon[cellValue].color} size='xxs'/></span>
        </div>
      )
    } else {
      return <div className={tdClass} key={j}><span></span></div>
    }
  }

  // 明细视图 -- 明细视图的表格后期最好改在组件上做统一维护，这部分需要更改接口
  getDetail = (detailClass) => {
    let { blogReportStore : { detailReport, detailReportHead, detailReportLeft } } = this.props;
    detailReport = toJS(detailReport);
    detailReportHead = toJS(detailReportHead);
    detailReportLeft = toJS(detailReportLeft);
    return (
      <div className={`${detailClass} blog-concernReport-content-detail`}>
        <div className={`${detailClass}-header`}>
          <div className={`${detailClass}-header-left`}>
            <span>{getLabel(390714,'微博明细')}</span>
          </div>
          <div className={`${detailClass}-header-right`} ref='scrollHeader'>
            {
              detailReportHead.map((td,i) => {
                return <div key={i}><span className={`${detailClass}-header-right-value`}>{td.cellValue}</span></div>
              })
            }
          </div>
        </div>
        <div className={`${detailClass}-content`}>
          <div className={`${detailClass}-content-left`} ref='scrollLeft'>
            {
              detailReportLeft.map((item,i) => {
                const { oName, oId } = item;
                return (
                <div className={`${detailClass}-content-left-name`} key={i}>
                  <span><Avatar userId={oId} style={{ width: 30, height: 30 }}/></span>
                  <span className={`${detailClass}-content-left-name-user`}>{oName}</span>
                </div>
                )
              })
            }
          </div>  
          <div className={`${detailClass}-content-right`} onScroll={(e)=>this.onScrollDetail(e,detailClass)}>
            {
              detailReport.map((tr,i) => {
                return <div key={i} className={`${detailClass}-content-right-tr`}>
                  { tr.map((td,j) => this.attentionDetailCell(td,j,`${detailClass}-content-right-tr-td`)) }
                </div>
              })
            }  
          </div>
        </div>
      </div>
    );
  }

  // 滚动事件
  onScrollDetail = (event) => {
    const top = event.target.scrollTop;
    const left = event.target.scrollLeft;
    const fixedBody = ReactDOM.findDOMNode(this.refs.scrollLeft);
    const fixedHead = ReactDOM.findDOMNode(this.refs.scrollHeader);
    if (fixedBody && fixedHead) {
      fixedBody.scrollTop = top;
      fixedHead.scrollLeft = left;
    }
  }

  /* 时间格式转换 */
  getNow = () => {
    let date = new Date();
    let y = date.getFullYear();
    let m = date.getMonth() + 1;
    m = m < 10 ? '0' + m : m;
    return y + '-' + m;
  }

  render()  {
    const { prefixCls, blogReportStore : { isLoading, hasInfos }, overlayTask } = this.props;
    let maxDate = this.getNow();
    return (
      <div className={`${prefixCls} blog-concernReport`}>
        {isLoading && <div className={`${prefixCls}-loading`}><ActivityIndicator toast text="Loading..." /></div>}
        {hasInfos === 0 ? (<div className='blog-noData'>
            <Result
                img={<Icon type="no-data" />}
                message={getLabel(83553, '暂无数据')}
            />
        </div>) : (
          <div className={`${prefixCls}-container`}>
            <Flex justify='between' className={`${prefixCls}-container-date blog-concernReport-date`} id='blog-concernReport-date'>
              <DateSwitch value={new Date()} type='month' onChange={date => this.concernDateChange(date)} dateConfig={{ maxDate: maxDate }}/>
              {overlayTask === 0 ? 
                <div className={`${prefixCls}-container-date-total blog-concernReport-date-detail`}>
                  {getLabel(352,'统计')}{getLabel(15191,'格式为')}'{getLabel(384467,'未提交总数')}/{getLabel(384468,'提交总数')}'
                </div> : 
                <div className={`${prefixCls}-container-date-detail`}>
                 <span className={`${prefixCls}-tip`}>
        <Icon type='check-circle-o' color='#2bb028' size='xxs'/><span>{getLabel(15176,'已提交')}</span>
      </span>&nbsp;&nbsp;<span className={`${prefixCls}-tip`}>
          <Icon type='check-circle-o' color='#F5B400' size='xxs'/><span>{getLabel(523636,'已补交')}</span>
      </span>&nbsp;&nbsp;<span className={`${prefixCls}-tip`}>
        <Icon type='blog-weitijiao' color='#505050' size='xxs'/><span>{getLabel(32555,'未提交')}</span>
      </span>
                </div>
              }
            </Flex>
            {overlayTask === 0 ? this.getTotal(`${prefixCls}-container-totalMain`) : this.getDetail(`${prefixCls}-container-detailMain`)}
          </div>
        )}
      </div>
    )
  }
}